<template>
  <div>
    <h1>计算属性</h1>


    <h3>computed小功能1</h3>
    <p>价格: {{ price }}</p>
    <p>
      数量:
      <button @click="count > 1 ? count-- : 0">-</button>
      {{ count }}
      <button @click="count++">+</button>
    </p>
    <hr />
    <p>总价: {{ total }}</p>
  </div>

  <hr>
  
  <h3>computed小功能2</h3>
  <div>
      昵称:  <input type="text" v-model="setName">  {{getName}}
  </div>

  <hr>

  <h3>computed小功能3</h3>
  <div v-for="item in newArray" :key="item.id">
      {{item.id}} -- {{item.name}}
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref, reactive, toRefs, computed } from "vue";
export default defineComponent({
  setup() {
    let price = ref(10);
    let count = ref(0);
    let total = computed(() => {
      return price.value * count.value;
    });





    let getName = ref('');
    let setName = computed({
        get(){
            return getName.value
        },
        set(val:string){
            getName.value = val;
        }
    })





    let array = [
        {id : 1, name : "java"},
        {id : 2, name : "vue"},
        {id : 3, name : "css"},
        {id : 4, name : "vuex"},
        {id : 5, name : "weixin"},
    ]
    let newArray = computed(()=>{
        return array.filter((item,index)=>{
            return item.id > 2;
        })
    })
    return {
      price,
      count,
      total,
      getName,
      setName,
      array,
      newArray,
    };
  },
});
</script>

<style scoped >
</style>

